import { Tabs } from "antd";
import { HomeFilled } from "@ant-design/icons";
import { useEffect, useMemo, useState } from "react";
import { useLocation, useNavigate } from "react-router-dom";
import { HOME_URL } from "@/config/config";
import { connect } from "react-redux";
import { setTabsList } from "@/redux/modules/global/action";
import { searchRoute } from "@/utils/util";
import MoreButton from "./components/MoreButton";
import "./index.less";
import { cloneDeep } from "lodash-es";
import ErrorRouter from "@/routers/modules/error";
// import { useAliveController } from "react-activation";

const LayoutTabs = (props: any) => {
	const { pathname } = useLocation();
	const navigate = useNavigate();
	// const { dropScope } = useAliveController();

	const { setTabsList } = props;
	const { themeConfig, tabsList } = props.global;
	const { backMenuList = [] } = props.permission;
	const [activeValue, setActiveValue] = useState<string>(pathname);

	/** Function */

	// click tabs
	const clickTabs = (path: string) => {
		navigate(path);
	};

	// add tabs
	const addTabs = () => {
		// error route
		const errRoute = searchRoute(pathname, ErrorRouter, false);
		if (errRoute && Object.keys(errRoute).length) return;
		// common route
		const route = searchRoute(pathname, backMenuList);
		if (!(route && Object.keys(route).length)) return;
		let newTabsList = cloneDeep(tabsList);
		if (tabsList.findIndex((ele: any) => ele.path === route.path) === -1) {
			newTabsList.push({ title: route!.name || route!.meta!.title, path: route.path });
			setTabsList(newTabsList);
		}
		setActiveValue(pathname);
	};

	// delete tabs
	const delTabs = (tabPath: string) => {
		if (tabPath === HOME_URL) return;
		if (pathname === tabPath) {
			let nextTabIndex = tabsList.findIndex((ele: any) => ele.path === pathname);
			let nextTab = tabsList[nextTabIndex + 1] || tabsList[nextTabIndex - 1];
			if (!nextTab) return;
			navigate(nextTab.path);
		}
		// try {
		// 	dropScope(tabPath);
		// } catch (err) {
		// 	console.log(err);
		// }
		setTabsList(tabsList.filter((item: Menu.MenuOptions) => item.path !== tabPath));
	};

	/** Memo */

	const items = useMemo(
		() =>
			tabsList.map((item: any) => ({
				key: item.path,
				label: (
					<span>
						{item.path == HOME_URL ? <HomeFilled /> : ""}
						{item.title}
					</span>
				),
				closable: item.path !== HOME_URL
			})),
		[tabsList]
	);

	/** Effect */

	useEffect(() => {
		addTabs();
	}, [pathname]);

	return (
		<>
			{!themeConfig.tabs && (
				<div className="tabs">
					<Tabs
						animated
						activeKey={activeValue}
						onChange={clickTabs}
						hideAdd
						type="editable-card"
						onEdit={path => delTabs(path as string)}
						items={items}
					/>
					<MoreButton tabsList={tabsList} delTabs={delTabs} setTabsList={setTabsList}></MoreButton>
				</div>
			)}
		</>
	);
};

const mapStateToProps = (state: any) => state;
const mapDispatchToProps = { setTabsList };
export default connect(mapStateToProps, mapDispatchToProps)(LayoutTabs);
